<template>
    <div class="flight-item">
        <div @click="isShow=!isShow">
            <!-- 显示的机票信息 -->
            <el-row type="flex" align="middle" class="flight-info">
                <el-col :span="6">
                    <span>{{ data.airline_name }} </span> {{ data.flight_no }}
                </el-col>
                <el-col :span="12">
                    <el-row type="flex" justify="space-between" class="flight-info-center">
                        <el-col :span="8" class="flight-airport">
                            <strong>{{ data.dep_time }}</strong>
                            <span>{{ data.org_airport_name }} {{ data.org_airport_quay }}</span>
                        </el-col>
                        <el-col :span="8" class="flight-time">
                            <!-- 飞行的时长 需要自己计算 -->
                            <span>{{ disTime() }}</span>
                        </el-col>
                        <el-col :span="8" class="flight-airport">
                            <strong>{{ data.arr_time }}</strong>
                            <span>{{data.dst_airport_name}}{{data.dst_airport_quay}}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6" class="flight-info-right">
                    ￥<span class="sell-price">{{ data.seat_infos[0].org_settle_price_child }}</span>起
                </el-col>
            </el-row>
        </div>
        <div class="flight-recommend">
            <!-- 隐藏的座位信息列表 -->
            <el-row v-show="isShow" type="flex"  justify="space-between" align="middle">
                <el-col :span="4">低价推荐</el-col>
                <el-col :span="20">
                    <el-row v-for="(val,index) in data.seat_infos" :key="index" type="flex" justify="space-between" align="middle" class="flight-sell">
                        <el-col :span="16" class="flight-sell-left">
                            <span>{{ val.name }}</span> | {{val.supplierName}}
                        </el-col>
                        <el-col :span="5" class="price">
                            ￥{{ val.org_settle_price }}
                        </el-col>
                        <el-col :span="3" class="choose-button">
                            <el-button 
                            type="warning" 
                            size="mini"
                            @click="handleChoose(val.seat_xid)">
                            选定
                            </el-button>
                            <p>剩余：{{ val.discount }}</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 声明data变量
        data: {
            // 表示将来接收到的data数据是一个对象
            type: Object,
            // 默认是空对象
            default: ()=>({})
        }
    },
    data(){
        return {
            isShow: false
        }
    },
    methods:{
        // 计算飞行时长
        disTime(){
            // Date.parse 这个是原生js的方法 用于生成时间的毫秒数
            let start = Date.parse(this.data.dep_datetime) // 单位：毫秒
            let end = Date.parse(this.data.arr_datetime) // 单位：毫秒
            // 计算时间差
            let disT = (end - start)/1000/60 // 时间差（单位：分）
            // Math.floor表示向下取整； % 表示取余数
            return `${Math.floor(disT/60)}时${disT%60}分`
        },
        // 选择机票 跳转到订单页面
        handleChoose(seat_xid){
            this.$router.push({
                path: '/air/order',
                query: {
                    id: this.data.id,
                    seat_xid: seat_xid
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
    .flight-item{
        border:1px #ddd solid;
        margin-bottom: 10px;

        .flight-info{
            padding:15px;
            cursor: pointer;

            > div{
                &:first-child, &:last-child{
                    text-align: center;
                }
            }
        }

        .flight-info-center{
            padding:0 30px;
            text-align: center;

            .flight-airport{
                strong{
                    display: block;
                    font-size:24px;
                    font-weight: normal;
                }
                span{
                    font-size: 12px;
                    color:#999;
                }
            }

            .flight-time{
                span{
                    display: inline-block;
                    padding:10px 0;
                    border-bottom: 1px #eee solid;
                    color:#999;
                }
            }
        }

        .flight-info-right{
            
            .sell-price{
                font-size: 24px;
                color:orange;
                margin:0 2px;
            }
        }
    }

    .flight-recommend{
        background: #f6f6f6;
        border-top:1px #eee solid;
        padding:0 20px;

        .flight-sell{
            border-bottom:1px #eee solid;
            padding:10px 0;

            &:last-child{
                border-bottom: none;
            }

            .flight-sell-left{
                font-size: 12px;
                span{
                    color:green;
                }
            } 

            .price{
                font-size: 20px;
                color:orange;
            }

            .choose-button{
                text-align: center;
                color:#666;
                button{
                    display: block;
                    width:100%;
                    margin-bottom:5px;
                }
            }
        }
    }
</style>